<!-- 居中显示的提示框 -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center"
    style="min-height: 200px; position:fixed; z-index:-1; height: 80vh; width: 100vw;">
    <!-- Then put toasts within -->
    <div id='alertToast' class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="font-size: 16px;">
        <div class="toast-header">
            <svg width="20" height="20" viewBox="0 0 20 20" class="bi text-success d-none" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg" focusable="false" toast-icon-type='info'>
                <use xlink:href="./img/bootstrap-icons.svg#exclamation-circle-fill" />
            </svg>
            <svg width="20" height="20" viewBox="0 0 20 20" class="bi text-danger" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg" focusable="false" toast-icon-type='alert'>
                <use xlink:href="./img/bootstrap-icons.svg#exclamation-triangle-fill" />
            </svg>
            <strong class="mr-auto ml-2" style="font-size: 16px;">告警信息</strong>
            <small></small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
    <!-- 对应的加载js代码 -->
    <script type="text/javascript">
        // 添加onload事件
        addLoadEvent(function(){
            // 轻量弹框启动和关闭需要设置z-index，避免被模态框挡住或挡住模态框
            $('#alertToast').on('shown.bs.toast', function () {
                // 添加z-index属性
                $('#alertToast').css('z-index', '9999');
                $('#alertToast').parent().css('z-index', '9999');
            });

            $('#alertToast').on('hidden.bs.toast', function () {
                // 移除z-index属性
                var toast = $('#alertToast');
                toast.css('z-index', '-1');
                toast.parent().css('z-index', '-1');
                toast.toast('dispose'); // 关闭后必须要销毁，否则无法重新设置是否自动隐藏的属性
            });
        });
    </script>
</div>

